<template>
  <div id="profile">
      <!-- 导航栏 -->
      <nav-bar class="nav-bar"><div slot="center">小方商城</div></nav-bar>
      <!-- 用户信息 -->
      <user-info class="user-info"/>
      <!-- 账户 -->
      <account class="account" />
      <!--  -->
      <list-view :list-data="orderList" class="order-list" />
      <list-view :list-data="serviceList" class="service-list" />
  </div>
</template>

<script>
// 导入字体图标库
import IconFont from 'assets/icon-font/iconfont.js';
// 导入组件
import UserInfo from './childComps/UserInfo';
import Account from './childComps/Account';
import ListView from './childComps/ListView';
//导入公共组件
import NavBar from 'components/common/navbar/NavBar';

export default {
  name: 'Profile',
  components: {
    UserInfo,
    Account,
    ListView,
    NavBar
  },
  data: function() {
    return {
      orderList: [
        { icon: '#icon-wodexiaoxi', info: '我的消息' },
        { icon: '#icon-jfsc', info: '积分商城' },
        { icon: '#icon-membership-card_icon', info: '会员卡' }],
      serviceList: [
        { icon: '#icon-cart-Empty', info: '我的购物车' },
        { icon: '#icon-download', info: '下载购物APP' }]
    };
  },
  mounted: function() {}
};
</script>

<style scoped>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
#profile {
  height: 100vh;
  background-color: #f2f2f2;
}
.nav-bar {
  background-color: var(--color-tint);
  color: #fff;
}

.order-list,
.service-list,
.account,.user-info{
  margin-top: 12px;
}
</style>
